<template>
	<view class="bigView">
		<z-paging ref="paging" :show-default-loading-more-text="false" v-model="dataList" @query="queryList">
			<view slot="top" style="display: flex;justify-content: center;background-color: white;flex-direction: column;">
				<navBar slot="top" title="积分领取"></navBar>
				<!-- <u-tabs :list="list1" @click="click"></u-tabs> -->
				<u-tabs style="font-size: 14px;" :activeStyle="{
					color: '#333333',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize:'14px'
				}" :inactiveStyle="{
					color: '#00000080',
					transform: 'scale(1)',
					fontSize:'14px'
				}" lineColor='#FF8C47' :list="list1" @click="click"></u-tabs>
			</view>
			<view class="itemView" v-for="(item, index) in dataList" :key="index">
				<view class="itemLeftView">
					<view class="leftView">
						<view class="title">
						{{item.ruleSettings}}
						</view>
						<view class="subTitle">积分</view>
					</view>
					<view class="rightView">
						<view class="title">
							{{item.reasonsIncrease}}
						</view>
						<view class="subTitle" v-if="item.claimStatus=='0'">{{item.expirationTime}} 后过期</view>
					</view>
				</view>
				<view class="itemRightView">
					<view :class="['btnView',item.claimStatus=='0'?'btnView1':'btnView2']" @click="btnHandle(item)">{{getBtnName(item)}}</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import handjiaxingzheng from '@/api/handjiaxingzheng.js'
	import points from '@/api/points.js'
	export default{
		components:{
			
		},
		data(){
			return {
				bottom:0,
				result:{},
				industrialType:0,
				dataList:[],
				audioContext: null,
				list1: [
					{
					name: '待领取',
				}, {
					name: '已领取',
				}, {
					name: '已过期'
				},
				],
				htmlValue:''
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
			this.initAudioContext()
			// this.newsListRequest(1)
		},
		methods:{
			initAudioContext(){
				this.audioContext = uni.createInnerAudioContext();
				this.audioContext.src = '/static/img/gold.mp3';
				this.audioContext.onPlay(() => {
				  console.log('开始播放');
				});
				this.audioContext.onError((err) => {
				  console.log(err);
				});
				this.audioContext.onEnded(() => {
				  console.log('播放结束');
				});
			},
			getBtnName(item){
				if(item.claimStatus=='0') return '立即领取'
				if(item.claimStatus=='1') return '已领取'
				if(item.claimStatus=='2') return '已过期'
			},
			click(item) {
				// this.industrialType = item.index+1
				console.log(item)
				this.industrialType = item.index;
				this.$refs.paging.reload()
				// this.newsListRequest(item.index+1)
			},
			btnHandle(item){
				if(item.claimStatus!='0'){
					return
				}
				uni.showLoading({
					title:"领取中..."
				})
				points.pointsCollection({id:item.id}).then(res=>{
					uni.hideLoading()
					this.audioContext.play();
					uni.showToast({
						title:"领取成功"
					})
					this.$refs.paging.reload()
				}).catch(err=>{
					uni.hideLoading()
				})
			},
			queryList(pageNo, pageSize) {
				points.listHandle({page:pageNo,size:pageSize,claimStatus:this.industrialType}).then(res =>{
					let records = res.records;
					if(pageNo==1){
						this.dataList = records;
					}else{
						this.dataList.concat(records)
					}
					this.$refs.paging.complete(records);
				}).catch(error =>{
					uni.stopPullDownRefresh()
				})
			}
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
}
.topView{
	flex-grow: 1;
	// width: 100vw;
	// background-color: green;
	display: flex;
	flex-direction: column;
	width: 100vw;
	overflow-y: auto;
}
.itemView{
	display: flex;
	flex-direction: row;
	width: calc(100vw - 32px);
	height: 170rpx;
	border-radius: 12px;
	margin-left: 16px;
	// padding: 12px;
	// background-color: white;
	margin-top: 8px;
	background-image: url(@/static/img/point_card.png);
	background-size: cover; /* 覆盖整个元素，可能会裁剪 */
	/* 或 */
	background-size: contain; /* 完整显示图片，可能会留白 */
	/* 或指定具体尺寸 */
	background-size: 100% 100%; /* 拉伸填充整个容器 */
	.itemLeftView{
		// display: flex;
		// flex-direction: row;
		// justify-content: space-between;
		// padding: 12px;
		flex: 1;
		display: flex;
		flex-direction: row;
		.leftView{
			display: flex;
			flex-direction: column;
			width: 174rpx;
			height: 100%;
			align-items: center;
			justify-content: center;
			// background-color: red;
			.title{
				color: #FF8740;
				font-size: 40rpx;
				font-weight: bold;
			}
			.subTitle{
				color: #FF8740;
				font-size: 24rpx;
			}
		}
		.rightView{
			flex: 1;
			display: flex;
			flex-direction: column;
			// background-color: orange;
			align-items: left;
			justify-content: center;
			.title{
				color: #333333;
				font-size: 28rpx;
			}
			.subTitle{
				color: #666666;
				font-size: 24rpx;
			}
		}
	}
	.itemRightView{
		width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.btnView{
			width: 140rpx;
			height: 52rpx;
			background-color: #FF8C47;
			color: #FFFFFF;
			font-size: 26rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.btnView1{
			opacity: 1;
		}
		.btnView2{
			opacity: 0.5;
		}
	}
}
</style>